<template>
  <div class="org-order-wrapper">
    <div class="top">
      <el-button
        v-for="(item, index) of buttonList"
        :key="index"
        :class="{ 'active': isActive === index }"
        @click="buttonClick(index)"
      >{{ item }}{{ '('+ 10 + ')' }}</el-button>
    </div>
    <div class="bottom">
      <div class="bottom-content d-flex-sb mt-35">
        <div class="d-flex">
          <Search placeholder="请输入课程名称" class="mr-15" />
          <el-form :inline="true" class="demo-form-inline mr-15" style="white-space: nowrap">
            <el-form-item label="订单状态：">
              <el-select v-model="value" clearable placeholder="全部" @change="selectChange">
                <el-option
                  v-for="item of classicList"
                  :key="item.id"
                  :label="item.kind_name"
                  :value="item.id"
                />
              </el-select>
            <!-- <el-cascader v-model="value" placeholder="全部" :options="classicList" clearable @change="handleChange" /> -->
            </el-form-item>
          </el-form>
          <el-form :inline="true" class="demo-form-inline mr-15" style="white-space: nowrap">
            <el-form-item label="下单时间：">
              <el-date-picker
                v-model="value"
                type="daterange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="pickerOptions"
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd HH:mm:ss"
                :default-time="['00:00:00', '23:59:59']"
                @change="handleChange"
              />
            </el-form-item>
          </el-form>
        </div>
        <el-button type="primary" style="background: #00ADB3; border-color: #00ADB3" @click="exportOrder">导出订单</el-button>
      </div>
      <div class="bottom-table">
        <order-table-list />
      </div>
    </div>
  </div>
</template>
<script>
import Search from '@/common/search'
import OrderTableList from './order-table-list'
export default {
  components: {
    Search,
    OrderTableList
  },
  data() {
    return {
      buttonList: ['待支付', '已支付', '已关闭'],
      isActive: 0,
      value: '',
      classicList: [
        {
          id: 1,
          kind_name: '课程'
        }
      ],
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      }
    }
  },
  methods: {
    buttonClick(index) {
      this.isActive = index
    },
    selectChange() {},
    handleChange() {},
    exportOrder() {}
  }
}
</script>
<style lang="scss" scoped>
.org-order-wrapper{
  box-sizing: border-box;
  background: #fff;
  height: 100%;
  flex: 1;
  padding: 20px;
  box-sizing: border-box;
  .bottom {
    .bottom-content {
      display: flex;
      align-items: center;
    }
    .bottom-table{
      margin-top: 30px;
    }
  }
}
.el-button {
  background: #e5e5e5;
  &.active {
    background-color: #5a98de !important;
    color: #fff !important;
  }
}
.d-flex-sb {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.d-flex{
  display: flex;
  align-items: center;
}
.el-form-item{
  margin: 0;
}
.mr-15{
  margin-right: 15px;
}
.mt-35{
  margin-top: 35px;
}
</style>
